<script setup>
import {ref} from "vue";
import {goService} from "../../tools/go";
import Bcheckbox from "../../components/form/checkbox/Bcheckbox.vue";
const activeItem = ref('最新');
const list = [
  {id:1,
    tile:'语文外聘执教时',
    age:"2.5-4w",
    nage:"秀峰区 |  本科学历  |  1-3年经验",
    han:"寒暑假",
    d:"周末双休",
    x:'八小时工作制',
    w:"国家法定假",
    dizhi:"广西商业解释学院",
    tiem:"1分钟"
  },
  {id:2,
    tile:'语文外聘执教时',
    age:"2.5-4w",
    nage:"秀峰区 |  本科学历  |  1-3年经验",
    han:"寒暑假",
    d:"周末双休",
    x:'八小时工作制',
    w:"国家法定假",
    dizhi:"广西商业解释学院",
    tiem:"1分钟"
  },
  {id:3,
    tile:'语文外聘执教时',
    age:"2.5-4w",
    nage:"秀峰区 |  本科学历  |  1-3年经验",
    han:"寒暑假",
    d:"周末双休",
    x:'八小时工作制',
    w:"国家法定假",
    dizhi:"广西商业解释学院",
    tiem:"1分钟"
  },
]
</script>

<template>
 <view class="back">
   <!-- 标题 -->
   <view class="titli">
     <view class="fh">
       <v-icon @click="goService()" class="icon" icon="mdi-chevron-left"></v-icon>
       <h3>社区就业</h3>
     </view>
     <view class="ss">
       <v-icon class="icon2" icon="mdi-magnify"></v-icon>
       <input type="text" placeholder="输入想要搜索的职位/公司">
     </view>
   </view>
   <!-- bg -->
   <view class="bg w">
     <img src="../../static/img/emplotmentbg.png" alt="">
   </view>
   <!-- nav -->
   <ul class="nav">
     <li @click="activeItem = '最新'" :class="{ active: activeItem === '最新' }">最新</li>
     <li @click="activeItem = '紧急'" :class="{ active: activeItem === '紧急' }">紧急</li>
     <li @click="activeItem = '推荐'" :class="{ active: activeItem === '推荐' }">推荐</li>
     <li @click="activeItem = '附近'" :class="{ active: activeItem === '附近' }">附近</li>
   </ul>
   <!-- 就业列表 -->
   <ul class="list w">
     <li v-for="(item,index) in list" :key="index">
       <view class="one"><h4>{{ item.tile }}</h4><text>{{ item.age }}</text></view>
       <text class="tow">{{ item.nage }}</text>
       <view class="three">
         <text>{{ item.han }}</text>
         <text>{{ item.d }}</text>
         <text>{{ item.x }}</text>
         <text>{{ item.w }}</text>
       </view>
       <view class="four">
         <view>
           <img src="../../static/img/indeximg/kjfs/kdds.png" alt="">
           <text>{{ item.dizhi }}</text>
         </view>
         <text class="i">{{ item.tiem }}</text>
       </view>
     </li>
   </ul>
 </view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";
.back{
  @include main.useTheme(){
    .list{
      li{
        //四
        .four{
          .i{
            font-size: 12px;
          }
          view{
            img{
              width: 30px;
              height: 30px;
              border-radius: 100px;
            }
            display: flex;
            align-items: center;
          }
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10px;
          color: #bbbbbb;
        }
        //三
        .three{
          text:nth-child(4){
            width: 75px;
          }
          text:nth-child(3){
            width: 80px;
          }
          text:nth-child(2){
            width: 55px;
          }
          text{
            margin: 0 5px;
            display: block;
            width: 40px;
            height: 20px;
            border: 1px solid #000000;
            border-radius: 3px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
          }
          display: flex;
          margin-top: 10px;
        }
        //二
        .tow{
          display: block;
          margin-top: 10px;
          color: main.getVal("primary_text_color");
        }
        //一
        .one{
          text{
            font-size: 18px;
            color: Red;
          }
          h4{
            font-weight: 500;
            font-size: 17px;
          }
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        width: 100%;
        padding: 12px;
        border-radius: 10px;
        background: #504949;
        margin: 10px 0;
      }
      display: flex;
      flex-direction: column;
    }
    //nav
    .nav{
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; /* 添加鼠标指针样式 */
        color: main.getVal("one_lv_text_color");
        &.active {
          color: main.getVal("primary_text_color");
          font-weight: 500;
          font-size: 20px;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            top: 25px;
            transform: translateX(-50%);
            width: 34px;
            height: 7px;
            background-color: #1bb2e1;
            border-radius: 20px;
          }
        }
      }
      display: flex;
      justify-content: space-evenly;
    }
    //背景
    .bg{
      img{
        width: 100%;
        height: 100%;
      }
    }
    //标题
    .titli{
      input{
        background: #CACACA;
        width: 100%;
        color: main.getVal("primary_text_color");
      }
      .ss{
        .icon2{
          color: main.getVal("primary_text_color");
        }
        background: #CACACA;
        width: 70%;
        height: 35px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        padding: 12px;
      }
      .fh{
        h3{
          font-weight: 500;
        }
        width: 30%;
        display: flex;
        font-size: 17px;
      }
      width: 100%;
      height: 8vh;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
    }
    .w{
      width: 95%;
      margin: 10px auto;
    }

  };
}
body::-webkit-scrollbar{
  display: none;
}
</style>